<template>
    <!--轮播图
    移动端：w<768 px 平板尺寸，随着尺寸变小，图片自适应缩小
    |- img的宽度=100%，通过img标签实现
    PC端：w>=768 电脑尺寸，随着尺寸变大，图片两边区域变大
    |- background-image（背景居中显示）：添加图片
    |- 居中图片：background-position：center
    |- 覆盖图片左右区域：background-size：cover
    -->
    <div class="ce_carousel">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators:点标记,指示器 -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <!--移动端：轮播图片内容,只有在768-992px(<992) 平板模式下可见 hidden-lg hidden-md
                TODO 优化bootstrap加载两种图片的默认请求，改用js创建a标签，img，已经style属性
                绑定data-xxx-img路径
                -->
                <div class="item active">
                    <a href="javascript:;" class="mobileCarousel hidden-lg hidden-md">
                        <img src="" alt="...">
                    </a>
                    <!--PC端：>992可见 小屏电脑 hidden-xs hidden-sm-->
                    <a href="javascript:;" class="PCCarousel hidden-xs hidden-sm"></a>
                    <!--轮播图片说明字幕-->
                    <!--<div class="carousel-caption">
                        红包雨
                    </div>-->
                </div>
                <div class="item">
                    <a href="javascript:;" class="mobileCarousel hidden-lg hidden-md">
                        <img src="" alt="...">
                    </a>
                    <a href="javascript:;" class="PCCarousel hidden-xs hidden-sm"></a>
                </div>
                <div class="item">
                    <a href="javascript:;" class="mobileCarousel hidden-lg hidden-md">
                        <img src="" alt="...">
                    </a>
                    <a href="javascript:;" class="PCCarousel hidden-xs hidden-sm"></a>
                </div>
            </div>

            <!-- Controls：PC端的上一张和下一张按钮
             绑定控制图片层id： href="#carousel-example-generic"
             图片运动行为：data-slide="prev"
             -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MainCarousel",
        data() {
            return {
                message: "carousel轮播图界面",
                largeImg: [
                    "./base/imgs/carousel/slide_01_2000x410.jpg",
                    "./base/imgs/carousel/slide_02_2000x410.jpg",
                    "./base/imgs/carousel/slide_03_2000x410.jpg"
                ],
                smallImg: [
                    "./base/imgs/carousel/slide_01_640x340.jpg",
                    "./base/imgs/carousel/slide_02_640x340.jpg",
                    "./base/imgs/carousel/slide_03_640x340.jpg"
                ],
            }
        },
        mounted() {
            /** 屏幕判断：获取视口
             * 1.移动端：轮播图片内容,只有在768-922px(<922) 平板模式下可见 hidden-lg hidden-md
             * 2.PC端：>992可见 小屏电脑 hidden-xs hidden-sm
             */
            this.getBaseModule();
            this.moveCarousel();

        },
        watch: {},
        methods: {
            //1.根据用户视口获取响应式轮播图片
            getImgUrl() {
                //获取所有item
                let pcCarousel = document.getElementsByClassName("PCCarousel");
                let mobileCarousel = document.querySelectorAll(".mobileCarousel > img");
                let largeImg=[];
                largeImg=this.largeImg;
                let smallImg=[];
                smallImg=this.smallImg;
                //1.监听用户屏幕视口
                $(window).on("resize", function () {
                    //获取当前视口宽度
                    let currentWidth = $(window).width();
                    //判断宽度
                    if (currentWidth >= 922) {
                        //PC端
                        //遍历所有item依次添加background-image
                        for (let i = 0; i < pcCarousel.length; i++) {
                            pcCarousel[i].style.backgroundImage = "url('" + largeImg[i] + "')";
                        }

                    } else {
                        //平板-手机端
                        for (let i = 0; i < mobileCarousel.length; i++) {
                            mobileCarousel[i].src=smallImg[i];
                        }
                    }
                    //默认事件自动触发trigger触发器开关一次
                }).trigger("resize");
            },
            //2.移动端：轮播图滑动效果
            moveCarousel(){
              let startX,endX;
              let carouselInner=$(".carousel-inner")[0];
              //获取当前轮播图
              let currentCarousel=$(".carousel");
              carouselInner.addEventListener("touchstart",function (e) {
                startX=e.targetTouches[0].clientX;
              });
              carouselInner.addEventListener("touchend",function (e) {
                endX=e.changedTouches[0].clientX;
                if(endX-startX>0){
                    //上一张：移动后的x > 异动前的x
                    currentCarousel.carousel('prev');
                }else{
                    currentCarousel.carousel('next');
                }
              })
            },
            //获取baseModule数据
            getBaseModule(){
                let loading=this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER+'/business/client/module/getBaseModule').then((response)=>{
                    //Loadings.hide();
                    setTimeout(function () {
                        loading.close();
                    },300);
                    let resp=response.data;
                    if(resp.success){
                        for(let i=0;i<resp.responseData.length;i++){
                            if(resp.responseData[i].name.indexOf("轮播图")!==-1){
                                this.largeImg=resp.responseData[i].picList;
                                this.smallImg=resp.responseData[i].miniPicList;
                            }
                        }
                        this.getImgUrl();
                    }
                });
            },
        }
    }
</script>

<style scoped>
    /*移动端carousel轮播*/
    .mobileCarousel {
        width: 100%;
        display: block;
    }

    .mobileCarousel img {
        width: 100%;
        display: block;
    }

    /*PC端carousel轮播*/
    .PCCarousel {
        width: 100%;
        height: 410px;
        display: block;
        /*设置BG图片,需要更换，这里将style设置入页面*/
        /*background-image: url("../../../public/base/imgs/carousel/slide_01_2000x410.jpg");*/
        background-position: center; /*居中显示*/
        background-size: cover; /*避免图片尺寸不一样，进行填充屏幕*/
    }
</style>